<template>
  <div class="ciname">
    <div v-show="routeIndex">
      <van-nav-bar
        title="影院"
        class="cinameNavbar"
        @click-left="onClickLeft"
        @click-right="onClickRight"
      >
        <template #left>
          <router-link to="" tag="div">
            <span>郑州</span>
            <van-icon size="13" name="arrow-down" />
          </router-link>
        </template>
        <template #title>
          <span class="title">影院</span>
        </template>
        <template #right>
          <span class="icon" @click="goSearch">
            <van-icon name="search" size="18" />
          </span>
        </template>
      </van-nav-bar>
      <div class="position">
        <div class="position-icon"></div>
        <p>{{ position }}</p>
      </div>
      <!-- 影院详情 -->
      <div class="wrapper">
        <div class="content">
          <div class="cinema-list">
            <div
              @click="linkto('/cinema/detail')"
              v-for="item in cinenamList"
              :key="item.id"
              class="cinema-item"
            >
              <div class="cinema-name">
                <h2>{{ item.cinemaName }}</h2>
                <span> {{ item.lowPrice }}元</span>
              </div>
              <div class="cinemaAddress">
                <p>{{ item.address }}</p>
                <span>{{ item.distance }}公里</span>
              </div>
              <div class="cinemaMovie">
                <span>惠</span>
                <p>我是药神等影片特惠</p>
              </div>
              <div class="cinemaMovie">
                <span class="sale">促</span>
                <p>观影套餐限量特惠</p>
              </div>
              <div class="cinemaMovie">
                <span class="open">促</span>
                <p>开卡特惠,每单2张立减2元</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import BScroll from '@better-scroll/core'
import { getMovieDetail, top } from 'network/movieDetail/MovieDetail'

export default {
  data() {
    return {
      position: '我在：金水区绿地新都会', //获取到的地址
      cinenamList: [
        {
          id: 'kak1',
          cinemaName: '耀莱成龙影城 (建业店)',
          lowPrice: 19.9,
          address: '金水区普惠路77号绿地之窗尚峰座正大乐城3楼',
          distance: 1.7,
        },
        {
          id: 'kak1',
          cinemaName: '耀莱成龙影城 (建业店)',
          lowPrice: 19.9,
          address: '金水区普惠路77号绿地之窗尚峰座正大乐城3楼',
          distance: 1.7,
        },
        {
          id: 'kak1',
          cinemaName: '耀莱成龙影城 (建业店)',
          lowPrice: 19.9,
          address: '金水区普惠路77号绿地之窗尚峰座正大乐城3楼',
          distance: 1.7,
        },
      ],
      detail: null,
    }
  },
  computed: {
    ...mapState({
      // roundCinema: function (state) {
      //     return state.cinema.cinemaList.fileter(ele => {
      //         return ele.position > 5
      //     })
      // }
    }),
    routeIndex() {
      return this.$route.meta.index !== 2
    },
  },
  created() {
    // const wrapper = this.$refs.wrapper
    top().then((val) => {
      this.detail = val
    })
    console.log(this.detail)
  },
  mounted() {
    this.bs = new BScroll('.wrapper', {
      click: true,
    })
  },
  methods: {
    onClickLeft() {},
    onClickRight() {},
    linkto(src) {
      this.$router.push(src)
    },
    goSearch() {
      this.$router.push({ name: 'search' })
    },
  },
}
</script>

<style scoped lang="scss">
.ciname {
  height: 100vh;
  background-color: #22262d;
  .cinameNavbar {
    height: 88px;
    background-color: #33363d;
    span {
      margin-left: 40px;
      font-size: 28px;
      color: #dfdfdf;
    }
    span.title {
      font-size: 36px;
      color: #ffffff;
    }
    span.icon {
      margin-right: 40px;
    }
  }
  .position {
    display: flex;
    height: 60px;
    font-size: 24px;
    background: #2c2f36;
    margin-top: 24px;
    color: #ffffff;

    .position-icon {
      height: 38px;
      width: 28px;
      margin: 5px 23px 0 43px;
      background: url(~@/assets/images/icons/position.png) no-repeat;
      background-size: 28px 38px;
    }
    p {
      margin-top: 5px;
    }
  }
  // 影院详情
  .wrapper {
    height: calc(100vh - 352px);
    overflow: hidden;
  }
  .cinema-list {
    .cinema-item {
      height: 292px;
      width: 670px;
      color: FFFFFF;
      margin: 0 auto;
      font-size: 28px;
      color: #ffffff;
      border-radius: 12px;
      border-radius: 12px;
      background: #33363d;
      margin-top: 16px;
      .cinema-name {
        display: flex;
        height: 40px;
        font-size: 28px;
        margin-left: 22px;
        padding-top: 22px;
        justify-content: space-between;
        padding-right: 26px;
        h2 {
          // margin-left: 22px;
          color: #ffffff 100%;
        }
        span {
          margin-left: 238px;
          color: #fbc34a;
        }
      }
      .cinemaAddress {
        opacity: 0.59;
        display: flex;
        height: 33px;
        font-size: 24px;
        margin-left: 22px;
        margin-top: 6px;
        justify-content: space-between;
        padding-right: 26px;
        span {
          height: 33px;
        }
      }
      .cinemaMovie {
        opacity: 0.59;
        display: flex;
        height: 36px;
        font-size: 24px;
        margin-left: 22px;
        margin-top: 22px;
        span {
          background-color: orange;
          margin-right: 24px;
          color: #dfdfdf;
          text-align: center;
          width: 30px;
        }
        span.sale {
          background-color: #a7469e;
        }
        span.open {
          background-color: #3130a3;
        }
      }
    }
  }
}
</style>
